<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="{{ url_for('static', filename='images/rec.ico') }}">
    <title>基于深度学习的电商推荐系统尝鲜Demo</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='layui/css/layui.css') }}">
    <script type="text/javascript" src="{{url_for('static', filename='js/jquery-3.3.1.min.js')}}"></script>
    </head>
    <body>
    <div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo layui-hide-xs layui-bg-black">开发者体验客户端</div>
        <!-- 头部区域（可配合layui 已有的水平导航） -->
        <ul class="layui-nav layui-layout-left">
        <!-- 移动端显示 -->
        <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
            <i class="layui-icon layui-icon-spread-left"></i>
        </li>
        </ul>
        <ul class="layui-nav layui-layout-right">
        <li class="layui-nav-item layui-hide layui-show-md-inline-block">
            <a href="javascript:;">
            <img src="{{url_for('static', filename='images/admin.jpg')}}" class="layui-nav-img">
            {{username}}
            </a>
            <dl class="layui-nav-child">
            <dd><a href="">设置</a></dd>
            <dd><a href="#" id="logout">退出</a></dd>
            </dl>
        </li>
        <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
            <a href="javascript:;">
            <i class="layui-icon layui-icon-more-vertical"></i>
            </a>
        </li>
        </ul>
    </div>
    
    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
        <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
        <ul class="layui-nav layui-nav-tree" lay-filter="test">
            <li class="layui-nav-item">
                <a id="nav0" class="single" data-src="/toStart"><i class="layui-icon layui-icon-layer">&nbsp;&nbsp;</i><cite>引导</cite></a>
            </li>
            <li class="layui-nav-item">
                <a  id="nav1" class="single" data-src="/toAS"><i class="layui-icon layui-icon-engine">&nbsp;&nbsp;</i><cite>AS全流程应用服务</cite></a>
            </li>
            <li class="layui-nav-item">
                <a href="javascript:;"><i class="layui-icon layui-icon-form">&nbsp;&nbsp;</i><cite>信息服务</cite></a>
                <dl class="layui-nav-child">
                    <dd ><a id="nav11" class="single" data-src="/toUm">um用户服务</a></dd>
                    <dd ><a id="nav12" class="single" data-src="/toCm">cm内容服务</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item">
                <a href="javascript:;"><i class="layui-icon layui-icon-release">&nbsp;&nbsp;</i><cite>推荐服务</cite></a>
                <dl class="layui-nav-child">
                    <dd><a id="nav21" class="single" data-src="/toRecall">recall召回服务</a></dd>
                    <dd><a id="nav22" class="single" data-src="/toRank">rank排序服务</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item"><a class="single" id="nav3" data-src="/toabout"><i class="layui-icon layui-icon-about">&nbsp;&nbsp;</i><cite>关于</cite></a></li>
        </ul>
        </div>
    </div>
    
    <div class="layui-body">
        <div class="layui-tab layui-tab-brief" lay-filter="navMenu" lay-allowClose="true">
            <ul class="layui-tab-title">		
            </ul>
            <div class="layui-tab-content">
                
            </div>
        </div>
    </div>
    <div class="layui-footer" style="line-height: 30px;text-align: center;color: #666;font-weight: 300;height:auto;">
        <!-- 底部固定区域 -->
        <p>
            Copyright&nbsp;©&nbsp;2022 &nbsp;&nbsp;<a href="http://52684z0q57.zicp.vip">ecrs.com</a>&nbsp;&nbsp;Apache2.0  Licensed  
        </p>
        <p>
            <a href="https://www.paddlepaddle.org.cn/" target="_blank">PaddlePaddle飞桨</a>
            <a href="https://aistudio.baidu.com/aistudio/index" target="_blank">aistudio</a>
            <a href="https://github.com/JingyibySUTsoftware" target="_blank">github</a>
            <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=36010902000274" rel="nofollow"><img src="{{url_for('static', filename = 'images/gongan.png')}}">公网安备 00000000000000号</a>
            <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">ICP备00000000号</a>
        </p>
        <p>
            E-Commerce Recommendation System 
        </p>
    </div>
</div>
<script src="{{ url_for('static', filename = 'layui/layui.js') }}" charset="utf-8"></script>
<script>
    function FrameWH(){
        var frameheight = $(window).height();
        console.log(frameheight);
        $(".layui-tab-content iframe").css("height",frameheight);
    }
    layui.use('element', function(){
        var $ = layui.jquery
        ,element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块
        //定义事件并为active绑定
        var active={
            //添加tab项
            tabAdd:function(name,url,tid){
                element.tabAdd('navMenu',{
                    title:name,
                    content: '<iframe frameborder="0" scrolling="yes" style="width:100%;height:800px;" src="'+url+'"></iframe>',
                    id:tid
                })
                //$(".layui-tab-title li[lay-id]").attr("class",layui-this)
                FrameWH()
            },
            //切换到指定的Tab项
            tabChange:function(id){
                element.tabChange('navMenu',id);
            }
        };
        
        
        //Tab触发事件
        $(".single").on("click",function(){
            var tabid=$(this).attr("id")
            var url =$(this).attr("data-src");
            var name=$(this).text()
            
            if($(".layui-tab-title li[lay-id]").length<=0){//没有tab，则立即新建一个tab
                active.tabAdd(name,url,tabid);
            }
            else{
                //如果有tab，则要判断是否已经创建了该tab
                var flag=false;//设置一个标志记录tab是否打开
                $.each($(".layui-tab-title li[lay-id]"),function(){
                    if($(this).attr("lay-id")==tabid){
                        flag=true;//如果点击新建的菜单项id在右侧存在，则说明tab存在且已打开
                    }
                })
                if(flag==false){
                    active.tabAdd(name,url,tabid);
                }
            }
            active.tabChange(tabid);//最后执行跳转到指定的tab
        });
    });

    layui.use(['layer'],function(){
        $ = layui.$;
        var layer = layui.layer;
        $("#logout").click(function(){
            layer.confirm('你确定要退出吗？',{icon:5,title:'退出系统'},function(index){
                layer.close(index);
                location.href="/";
            },function(index){
                //停止运作
                layer.close(index);
            })
        });
    });

    //获取src值
    /*$(".layui-nav-item a").on("click",function(){
        var address =$(this).attr("data-src");
        $("iframe").attr("src",address);
        var frame = $("#aa");
        var frameheight = $(window).height();
        console.log(frameheight);
        frame.css("height",frameheight);
    });*/
    //一下代码是根据窗口高度在设置iframe的高度
    
    //JS 
    layui.use(['element', 'layer', 'util'], function(){
    var element = layui.element
    ,layer = layui.layer
    ,util = layui.util
    ,$ = layui.$;
    
    //头部事件
    util.event('lay-header-event', {
        //左侧菜单事件
        menuLeft: function(othis){
        layer.msg('展开左侧菜单的操作', {icon: 0});
        }
        ,menuRight: function(){
        layer.open({
            type: 1
            ,content: '<div style="padding: 15px;">电商推荐系统模块与其他电商项目配合食用效果更佳哦~</div>'
            ,area: ['260px', '100%']
            ,offset: 'rt' //右上角
            ,anim: 5
            ,shadeClose: true
        });
        }
    });
    $(document).ready(function(){
        $('#nav0').click();
    });
});
</script>
</body>
</html>